<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vendor/three.js/Three.js"></script>
    <script src="vendor/three.js/RequestAnimationFrame.js"></script>
    <script src="vendor/three.js/Stats.js"></script>
    <script src="vendor/three.js/Detector.js"></script>
    <script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
    <script src="vendor/OrbitControls.js"></script>
    <script src="vendor/ThreeCSG_02.js"></script>

    <script src="THREEx.GeometryUtils.js"></script>
    <script src="THREEx.screenshot.js"></script>

    <script src="operations.js"></script>
    <script src="Primitives.js"></script>
    <script src="functions.js"></script>

</head>
<body>
<div id="statu"></div>
<div id="container"></div>
<script type="text/javascript">
    var camera, scene, renderer,raycaster,stats;
    var geometry, material, mesh;
    var mouse =  new THREE.Vector2(),INTERSECTED=null,ORIGIN=null;
    var windowHalfX=window.innerWidth/2;
    var windowHalfY=window.innerHeight/2;
    var currentHex;

    csgmouseX=0;
    csgmouseY=0;
    meshs=[];
    selection=[];
    csginit();
    csganimate();

    material=new THREE.MeshLambertMaterial({color: 0xa9ff, shading: THREE.SmoothShading });
    var cy_xMesh= new THREE.Mesh(new THREE.CylinderGeometry(0.4,0.4,2.2,32),material);
    var cy_xCSG=new ThreeBSP(cy_xMesh);
    currentHex=cy_xMesh.material.emissive.getHex();
    var cy_yMesh=new THREE.Mesh(new THREE.CylinderGeometry(0.4,0.4,2.2,32),material);
    cy_yMesh.rotation.x=Math.PI/2;
    var cy_yCSG= new ThreeBSP(cy_yMesh);
    var cy_zMesh=new THREE.Mesh(new THREE.CylinderGeometry(0.4,0.4,2.2,32),material);
    cy_zMesh.rotation.z=Math.PI/2;
    var cy_zCSG= new ThreeBSP(cy_zMesh);
    var cubeMesh	= new THREE.Mesh( new THREE.CubeGeometry( 1.6, 1.6, 1.6 ),material);
    cubeMesh.position.x=0;
    var cubeCSG= new ThreeBSP(cubeMesh);
    var sphereMesh = new THREE.Mesh( new THREE.SphereGeometry( 1, 32, 16),material);
    var sphereCSG=new ThreeBSP(sphereMesh);
    var union1=cy_xCSG.union(cy_yCSG);
    var union2=union1.union(cy_zCSG);
    var subtract1=cubeCSG.subtract(union2);
    var common=subtract1.intersect(sphereCSG);
    mesh=common.toMesh(new THREE.MeshLambertMaterial({color: 0xa9ff,shading:THREE.SmoothShading}));
    meshs.push(mesh);
    scene.add(mesh);

    showstatue();


    function showstatue() {
        var status=document.getElementById("statu");
        status.innerHTML=status.innerHTML+"<p style='text-indent: 50px'>Goal 3D Geometry - orbit and pan the geometry to check</p>";
    }


    function csginit() {
        scene=new THREE.Scene();
        if(!scene.background)
        {
            var col=new THREE.Color(0x28ad46);
            scene.background=col;
        }


        camera=new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(0,0,2.5);
        camera.lookAt(scene.position);
        scene.add(camera);

        var dlight=new THREE.DirectionalLight();
        //var dlight=new THREE.DirectionalLight();
        dlight.color.setHSL(0.63, 100, 62.35 );
        dlight.position.set(1,1,1).normalize();
        scene.add(dlight);

        var dlight_2=new THREE.DirectionalLight();
        //var dlight_2=new THREE.DirectionalLight(0x408040,1.5);
        dlight_2.color.setHSL(0.63,42.86,56.08);
        dlight_2.position.set(0,-1,0).normalize();
        scene.add(dlight_2);

        var plight=new THREE.PointLight(0xffffff,0.85);
        plight.color.setHSL(0, 0.0, 74.90);
        plight.position.set( -3, 3, -3);
        scene.add(plight);

        var plight_2=new THREE.PointLight( 0xffffff, 0.85 );
        plight.color.setHSL(0, 0.0, 74.90);
        plight_2.position.set(2,-2,2);
        scene.add(plight_2);

        document.addEventListener("mousemove",onDocumentMouseMove,false);
        document.addEventListener("click",onDocumentClick,false);


        renderer=new THREE.WebGLRenderer({
            antialias		: true,
            preserveDrawingBuffer	: true
        });
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.getElementById('container').appendChild(renderer.domElement);
        controls = new THREE.OrbitControls (camera, renderer.domElement);
        window.addEventListener( 'resize', onWindowResize, false );

        raycaster = new THREE.Raycaster();
        stats=new Stats();
        //document.getElementById('container').appendChild(stats.domElement);

    }

    function csganimate(){
        requestAnimationFrame(csganimate);

        rendercsg();
        stats.update();

    }

    function rendercsg() {

        raycaster.setFromCamera(mouse,camera);
        var intersects = raycaster.intersectObjects( meshs );

        if ( intersects.length > 0 ) {
            if ( INTERSECTED != intersects[ 0 ].object ) {
                if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
                INTERSECTED = intersects[ 0 ].object;
                INTERSECTED.currentHex=currentHex;
                INTERSECTED.material.emissive.setHex( 0xff0000 );
            }
        } else {
            if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
            INTERSECTED = null;
        }

        if(selection.length>0){
            for(var i=0;i<selection.length;i++)
            {
                var select=selection[i];
                select.material.emissive.setHex(0xdd0000);
            }
        }
        renderer.render( scene, camera );

    }

    function onDocumentMouseMove(event) {
        event.preventDefault();
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function onDocumentClick(event) {
        event.preventDefault();
        if(INTERSECTED)
        {
            var find=selectionfind(INTERSECTED);
            if(find<0)
            {
                selection.push(INTERSECTED);
                return 0;
            }
            selection[find].material.emissive.setHex(selection[find].currentHex);
            selection.splice(find,1);
        }

    }

    function selectionfind(selectobject) {
        if(selection.length>0)
        {
            for(var i=0;i<selection.length;i++)
            {
                if(selectobject==selection[i])
                    return i;
            }
        }
        return -1;
    }

    function meshfind(selectobject) {
        if(meshs.length>0)
        {
            for(var i=0;i<meshs.length;i++)
            {
                if(selectobject==meshs[i])
                    return i;
            }
        }
        return -1;
    }


</script>
</body>
</html>